<template>
    <s-ripple class="item" @click="" v-for="(item, i) in ps" :key="i">
        <div class="img">
            {{ item.name[0] }}
        </div>
        <div class="title">{{ item.name }}</div>
        <div class="title_posi">{{ item.position }}</div>
    </s-ripple>
</template>

<script setup>
import { ref } from 'vue'
let ps = ref([
    {
        "name": "王泽荣",
        "sex": "男",
        "position": "女",
        "birthday": "1980-05-23"
    },
    {
        "name": "璩邵美",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "邰若淑",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "古雅凡",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "卓书桃",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "贺幻香",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "孔依辰",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "潘千柔",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "束吟怀",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "芮怡可",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "毋冬寒",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "戈若英",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "焦松雨",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "伊夏月",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "莘忻忻",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "翟皓月",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "訾臻晰",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "蒲梅青",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "潘凝远",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "蒙轩秀",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "惠希慕",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "衡南珍",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "田绢子",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "江雨琼",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "郁念念",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "池晶霞",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "曹流逸",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "康代丝",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "寇平露",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "鱼晓巧",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "庾清淑",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "龚天春",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "毋元槐",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "苏菊霞",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "贾熙怡",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "晃慕悦",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "余嫚儿",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "沃海桃",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "空丝雨",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "巴依珊",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "武婀娜",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "常珍丽",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "从喜悦",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "戈梦菡",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "潘伶伶",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "阙笛韵",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "空琼芳",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "侯晏然",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "谢平宁",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    },
    {
        "name": "苍春嫣",
        "sex": "男",
        "position": "学生",
        "birthday": "1980-05-23"
    }
])
</script>

<style scoped>
.item {
    width: 120px;
    height: 130px;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

.item .img {
    width: 60px;
    height: 60px;
    background-color: rgb(0, 137, 255);
    border-radius: 9999px;
    margin-left: 25%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: aliceblue;
}

.item .title {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

.item .title_posi {
    font-size: 12px;
    text-align: center;
}
</style>